<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Calendar Sample: Desktop</title>				
		<style type="text/css">
			@import "../themes/claro/Calendar.css";
			@import "calendar.css";
			@import "asyncStore.css";
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/themes/claro/claro.css";
		</style>	
				
	</head>
	
	<body class="claro">
		<script type="text/javascript" 
						data-dojo-config="async: true, parseOnLoad: true"
		 				src="../../../dojo/dojo.js"></script>		 				
		
			<script type="text/javascript">

			require(["dojo/ready", "dojo/_base/declare", "dojo/_base/lang", "dojo/_base/sniff", "dojo/_base/array", "dojo/_base/fx", "dojo/on", 
			         "dojo/date/locale", "dojo/parser",	"dojo/Deferred", "dojo/dom", "dojo/dom-construct",	"dojo/store/Memory", 
			         "dojo/store/Observable",	"dojox/calendar/Calendar", "dijit/Calendar", "dijit/Menu", "dijit/MenuItem"	],

				function(ready, declare, lang, has, arr, fx, on, locale, parser, Deferred, dom, domConstruct,
					Memory, Observable, Calendar){

					ready(function(){
					
						// Display different hint every 10 seconds 
						var hints = [
							"Hint: Create an event by clicking and dragging on the grid while maintaining the control key",
							"Hint: Move an event by clicking on it and dragging it",
							"Hint: Resize an event by clicking on one of its ends and dragging it"
						];
						
						var hintIdx = 0;
						dom.byId("hint").innerHTML = hints[0];
												
						setInterval(function(){
							fx.fadeOut({node: "hint", 
								onEnd: function(){
									hintIdx = hintIdx+1>hints.length-1 ? 0 : hintIdx+1;
									dom.byId("hint").innerHTML = hints[hintIdx];
									fx.fadeIn({node: "hint"}).play(500); 									
								}
							}).play(500);
						}, 10000);
																					
						// Calendar model creation						
						var modelBase = [
							{day: 1, start: [10,0], duration: 1400},
							{day: 2, start: [10,30], duration: 120},
							{day: 2, start: [12,0], duration: 240},
							{day: 3, start: [6,0], duration: 180},
							{day: 3, start: [0,0], duration: 2880, allDay: true}
						];
						
						var someData = [];
												
						var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj());
						
						for (var id=0; id<modelBase.length; id++) {
							var newObj = {
								id: id,
								summary: "New Event " + id,
								startTime: new calendar.dateClassObj(startOfWeek.getTime()),
								endTime: new calendar.dateClassObj(startOfWeek.getTime()),
								allDay: modelBase[id].allDay
							};

							newObj.startTime = calendar.dateModule.add(newObj.startTime, "day", modelBase[id].day);
							newObj.startTime.setHours(modelBase[id].start[0]);
							newObj.startTime.setMinutes(modelBase[id].start[1]);

							newObj.endTime = calendar.dateModule.add(newObj.startTime, "minute", modelBase[id].duration);

							someData.push(newObj);
						}
						
						
						// BEGIN HACK
						// Hack to simulate some latency when adding / updating an event.
						// Observable is breaking completely the inheritance chain
						
						var DelayedMemory = declare(Memory, {
							put: function(value, options){
								var def = new Deferred();
								var res = this.inherited(arguments);
								setTimeout(lang.hitch(this, function(){									
									def.resolve(res);
								}), 1000);							
								return def;
							},
							
							newIdCount: 100,
							
							add: function(value, options){
								value.id = this.newIdCount++;
								return this.inherited(arguments, [value, options]);
							}
						});
						
						var store = new Observable(DelayedMemory({data: []}));
						
						calendar.set("store", store);
						calendar.set("date", startOfWeek);
						
						// Enable creation of event interactively by ctrl clicking grid.
						var createItem = function(view, d, e){
											
							// create item by maintaining control key
							if(!e.ctrlKey || e.shiftKey || e.altKey){
								return null;
							}
						
							// create a new event
							var start, end;
							var colView = calendar.columnView;
							var cal = calendar.dateModule;
							
							if(view == colView){
								start = calendar.floorDate(d, "minute", colView.timeSlotDuration);
								end = cal.add(start, "minute", colView.timeSlotDuration); 
							}else{
								start = calendar.floorToDay(d);
								end = cal.add(start, "day", 1);
							}
							
							var item = {								
								created: true,
								summary: "New event",
								startTime: start,
								endTime: end,
								allDay: view.viewKind == "matrix"
							};
							
							id++;	
							
							return item;							
						};
						
						calendar.set("createOnGridClick", true);
						calendar.set("createItemFunc", createItem);						
											
						// show context menu on right clicking an event
						calendar.on("itemContextMenu", function(e){
							dojo.stopEvent(e.triggerEvent);
							calendarContextMenu._openMyself({ 
								target: e.renderer.domNode, 
								coords: {x: e.triggerEvent.pageX, y: e.triggerEvent.pageY} 
							});
						});
						
						contextMenuDelete.on("click", function(){
							arr.forEach(calendar.selectedItems, function(item){
								calendar.store.remove(item.id);
							}); 							
						});
																																					
						// Hide loading panel when application is ready
						fx.fadeOut({
							node:"loadingPanel", 
							onEnd: function(node){
								node.parentNode.removeChild(node)
							}}).play(500);
						

					});
			});
			</script>
			
			<div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff">
				<span style="background: #DBEB8F;padding:2px">Loading...</span>
			</div>			
		    
		    <div data-dojo-id="calendar" data-dojo-type="dojox.calendar.Calendar" 
				style="position:absolute;left:10px;top:10px;bottom:30px;right:10px">
				<div data-dojo-type="dijit.Menu" data-dojo-id="calendarContextMenu" style="display: none;">
	                <div data-dojo-type="dijit.MenuItem" data-dojo-id="contextMenuDelete" data-dojo-props="iconClass:'dijitIcon dijitIconDelete'">Delete</div>
	            </div>	
			</div>
			<div id="hint" style="position:absolute;left:10px;height:15px;bottom:10px;right:10px;color:#999;overflow:auto"></div>
	    		    
		</div>																		
						
	</body>
</html>
